<template>
	<view class="notice">
		<view class="left_icon">
			<uni-icons type="notification-filled" color="#ffffff" size="16"></uni-icons>
		</view>
		<view class="right_notice">
			<swiper class="notice_swiper" circular vertical easing-function="easeInOutCubic" autoplay interval="5000">
				<swiper-item v-for="(item,index) in noticeList" :key="index" class="sw_item" @click="itemClick(item)">
					<text class="sw_text">{{item.title}}</text>
					<!-- <uni-icons type="right" color="#ffffff" size="18"></uni-icons> -->
				</swiper-item>
			</swiper>
		</view>
		<view class="more" @click="more">
			<text>更多</text>
			<uni-icons type="right" color="#575A6E" size="12"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},

		components: {},
		props: {
			colors: {
				type: String,
				default: '#575A6E'
			},
			noticeList: {
				type: Array
			}
		},
		methods: {
			itemClick(item) {
				this.$emit('click', item);
			},
			more() {
				this.$emit('goMore');
			},
		}
	};
</script>
<style lang="scss" scoped>
	.notice {
		height: 80upx;
		line-height: 80upx;
		display: flex;
		padding: 0 0upx;
		align-items: center;
		width: 100%;
	}

	.left_icon {
		margin-right: 15upx;
		background-color: #555BFF;
		border-radius: 50%;
		width: 45upx;
		height: 45upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left_icon .iconfont {
		display: inline-block;
		font-size: 44upx;
	}

	.right_notice {
		flex: 1;
	}

	.right_notice .notice_swiper {
		height: 80upx;
	}

	.notice_swiper .sw_item {
		height: 80upx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.notice_swiper .sw_item .sw_text {
		flex: 1;
		font-size: 28upx;
		color: #575A6E;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice_swiper .sw_image {
		width: 40upx;
		height: 40upx;
		float: right;
		margin-top: 20upx;
	}

	.more {
		font-size: 26upx;
		color: #575A6E;
		display: flex;
		align-items: center;
		margin-left: 20upx;
	}
</style>